<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>创建组件</title>

		<script src="js/vue.js"></script>

	</head>

	<body>
		<div id="app">

			<button @click="showLogin">登录</button>
			<button @click="showReg">注册</button>
			<login v-if="isLogin"></login>
			<reg v-else></reg>

			vue中的componet组件，是个占位符；:is 属性 = 组件名， 可以用来指定是否显示哪个组件 如果直接写组件名，则必须再单引号
			<!--			<componet :is="'login''"></componet>-->
			<componet :is="comName"></componet>

		</div>

		<template id="temp1">

			<div>
				<h1> 这是三种创建的组件</h1>

			</div>

		</template>

		<template id="login">

			<div style="border:dotted 1px;">
				<p>
					<h1>登录</h1></p>
				<p>
					用户名：<input type="text" v-model="userName" />

				</p>
				<p>
					密码：<input type="password" v-model="userPwd" />

				</p>
				<p>
					<button @click="toast">提交</button> &nbsp;&nbsp;&nbsp;&nbsp;
					<button @click="clear">清除</button>
				</p>
			</div>

		</template>
		<template id="reg">

			<div style="border:dotted 1px;">

				<p>
					<h1>注册</h1></p>

				<p>
					用户名：<input type="text" v-model="userName" />

				</p>
				<p>
					密码：<input type="password" v-model="userPwd" />

				</p>
				<p>
					再次密码：<input type="password" v-model="userPwd2" />

				</p>
				<p>
					<button @click="toast">提交</button> &nbsp;&nbsp;&nbsp;&nbsp;
					<button @click="clear">清除</button>
				</p>
			</div>

		</template>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					isLogin: true,
					comName: "login"
				},
				methods: {
					showLogin() {
						this.isLogin = true;
						this.comName = "login";
					},
					showReg() {
						this.isLogin = false;
						this.comName = "reg";
					}
				},
				components: {
					//定义私有组件；
					//组件的data，必须是一个function
					//还必须返回一个对象；
					login: {
						template: "#login",
						data: function() {
							return {
								userName: "userName",
								userPwd: "userPwd"

							}
						},

						methods: {
							toast() {
								alert(this.userName + ":" + this.userPwd)
							},
							clear() {
								this.userName = ""
								this.userPwd = ""
							}
						}

					},
					reg: {
						template: "#reg",
						data: function() {
							return {
								userName: "userName",
								userPwd: "userPwd",
								userPwd2: "userPwd2"

							}
						},

						methods: {
							toast() {
								alert(this.userName + ":" + this.userPwd + ":" + this.userPwd2)
							},
							clear() {
								this.userName = ""
								this.userPwd = ""
								this.userPwd2 = ""
							}
						}
					}

				}

			});
		</script>
	</body>

</html>